<!--
  Copyright 2013-2018 the original author or authors.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<div class="card">
  <div class="card-header">
    <h2>Web</h2>
  </div>
  <div class="card-body">
    <div ng-include src="'template/gt-loading-overlay.html'"></div>
    <div ng-include src="'template/gt-http-error-overlay.html'"></div>
    <div ng-form
         gt-form-autofocus-on-first-input
         name="formCtrl"
         style="padding-top: 15px;">
      <div gt-form-group
           gt-label="Port"
           gt-model="config.port"
           gt-number="true"
           gt-pattern="pattern.integer"
           gt-required="loaded"
           gt-disabled="!layout.adminEdit || portReadOnly"
           gt-width="7em"
           ng-if="!layout.central">
        <div class="help-block">
          <div class="gt-yellow"
               ng-if="originalConfig.port !== activePort"
               style="padding-bottom: 5px;">
            Active value is <code>{{activePort}}</code>.
          </div>
          Port that the user interface listens on.
          <span ng-if="layout.adminEdit && portReadOnly">
            The port is read-only because it has been set via the jvm arg
            <code style="white-space: nowrap;">-Dglowroot.agent.port={{config.port}}</code>.
          </span>
        </div>
      </div>
      <div gt-form-group
           gt-label="Bind address"
           gt-model="config.bindAddress"
           gt-required="loaded"
           gt-disabled="!layout.adminEdit"
           gt-width="7em"
           ng-if="!layout.central">
        <div class="help-block">
          <div class="gt-yellow"
               ng-if="originalConfig.bindAddress !== activeBindAddress"
               style="padding-bottom: 5px;">
            This change requires JVM restart. Active value is <code>{{activeBindAddress}}</code>.
          </div>
          Address that the user interface listens on.
          <span ng-if="originalConfig.bindAddress === '127.0.0.1'">
            To access the UI from remote machines, change the bind address to 0.0.0.0
          </span>
        </div>
      </div>
      <div gt-form-group
           gt-type="checkbox"
           gt-label="HTTPS"
           gt-checkbox-label="Use HTTPS"
           gt-model="config.https"
           gt-disabled="!layout.adminEdit"
           ng-if="!layout.central">
        <div class="help-block">
          <div class="gt-yellow"
               ng-if="originalConfig.https !== activeHttps"
               style="padding-bottom: 5px;">
            Active value is <code>{{activeHttps}}</code>.
          </div>
          Serve the user interface over HTTPS. The certificate and private key to be used must be placed in
          <span ng-if="confDirs.length === 1">
            <em>{{confDirs[0]}}</em>,
          </span>
          <span ng-if="confDirs.length === 2">
            either <em>{{confDirs[0]}}</em> or <em>{{confDirs[1]}}</em>,
          </span>
          <span ng-if="confDirs.length === 3">
            either <em>{{confDirs[0]}}</em>, <em>{{confDirs[1]}}</em> or <em>{{confDirs[2]}}</em>,
          </span>
          <span ng-if="confDirs.length === 4">
            either <em>{{confDirs[0]}}</em>, <em>{{confDirs[1]}}</em>, <em>{{confDirs[2]}}</em>
            or <em>{{confDirs[3]}}</em>,
          </span>
          with filenames <em>ui-cert.pem</em> and <em>ui-key.pem</em> before enabling
          HTTPS, where ui-cert.pem is a PEM encoded X.509 certificate chain, and ui-key.pem is a PEM encoded PKCS#8
          private key without a passphrase.
          (for example, a self signed certificate can be generated at the command line meeting the above requirements
          using OpenSSL 1.0.0 or later:
          <em>openssl req -new -x509 -nodes -days 365 -out ui-cert.pem -keyout ui-key.pem</em>)
        </div>
      </div>
      <div gt-form-group
           gt-label="Context path"
           gt-model="config.contextPath"
           gt-pattern="/^\/$|^\/.*[^/]$/"
           gt-required="loaded"
           gt-disabled="!layout.adminEdit"
           gt-width="15em"
           ng-if="!layout.central">
        <div class="help-block">
          This only needs to be changed if reverse proxying the user interface behind a non-root context path.
        </div>
      </div>
      <div gt-form-group
           gt-label="Session timeout"
           gt-model="config.sessionTimeoutMinutes"
           gt-number="true"
           gt-pattern="pattern.integer"
           gt-required="loaded"
           gt-disabled="!layout.loginEnabled || !layout.adminEdit"
           gt-width="7em"
           gt-addon="minutes">
        <div class="help-block">
          <span ng-if="layout.adminEdit && !layout.loginEnabled">
            The session timeout is disabled because there are no users configured.
          </span>
          Session timeout <code>0</code> means sessions do not time out, except on jvm restart at which time all
          sessions time out.
        </div>
      </div>
      <div gt-form-group
           gt-label="Session cookie name"
           gt-model="config.sessionCookieName"
           gt-pattern="/^[a-zA-Z0-9_]*$/"
           gt-required="loaded"
           gt-disabled="!layout.loginEnabled || !layout.adminEdit"
           gt-width="20em">
        <div class="help-block">
          <span ng-if="layout.adminEdit && !layout.loginEnabled">
            The session cookie name is disabled because there are no users configured.
          </span>
        </div>
      </div>
      <div class="form-group row"
           ng-if="layout.adminEdit">
        <div class="offset-xl-3 col-xl-9">
          <div gt-button
               gt-label="Save changes"
               gt-click="save(deferred)"
               gt-validate-form="formCtrl">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- each page with confirmation dialog needs its own confirmation dom so that it is deleted on $destroy -->
<div ng-include="'template/gt-confirmation.html'"></div>
